<template>
  <div class="list">

    <div class="banner">
      <div class="top"
        :style="{ background: backgroundStyle, transform: scaleValue, opacity: opacityValue }">
        <div class="mask"></div>
        <div class="content">
          <span class="title">{{rankData.title}}</span>
          <span class="listener-number"
          v-if="rankData.playCount"><img src="./../assets/headset.svg">{{getCount}}</span>
        </div>
      </div>
    </div>

    <div class="box">
      <my-scroll
        :probeType = "probeType"
        :listenScroll = "listenScroll"
        @scroll="pageScroll"
        class="scroll-box">
      <div class="in-box">

      <div class="container">
        <div class="play-all">
          <div class="play-icon">
            <img src="./../assets/playBtn.svg">
          </div>
          <div class="play" @click="playAll">播放全部<span>(共{{rankData.sum}}首)</span></div>
        </div>
        <div class="songs">
          <div class="item"
               @click="selectSong(item.id, item.name, item.al.picUrl, item.ar, index)"
               v-for="(item, index) in rankData.rankList"
               :key="index">
            <span class="number">{{index+1}}</span>
            <div class="detail">
              <span class="songName">{{item.name}}</span>
              <span class="singer">{{getSingers(item.ar)}}</span>
            </div>
          </div>
        </div>
      </div>

      </div>
      </my-scroll>
    </div>

  </div>
</template>

<script>
  import MyScroll from "../components/MyScroll";
  export default {
    name: "SongSheet",
    components: {
      MyScroll
    },
    props: {
      rankData: Object
    },
    data(){
      return {
        scaleValue: 'scale(1) translateY(0)',
        opacityValue: 1,
        probeType: 3,
        listenScroll: true,
        backgroundStyle: '',
        playerVisible: false
      };
    },
    watch: {
      rankData: {
        deep: true,
        immediate: true,
        handler(val){
          this.backgroundStyle = 'url("'+val.backgroundUrl+'")  no-repeat center/100% 100%';
        }
      }
    },
    computed: {
      getCount: function () {
        if (this.rankData.playCount > 10000){
          return Math.floor(this.rankData.playCount/10000) + '万';
        }else{
          return this.rankData.playCount;
        }
      },
      getSingers: function () {
        return function(singers){
          let arr = singers.map((item) => {
            return item.name;
          });
          return  arr.join(' & ');
        };
      }
    },
    methods: {
      playAll(){
        this.$store.dispatch("setCurrSongList", null); //先清空之前的列表
        let list = this.rankData.rankList;
        this.$store.dispatch("setCurrSongList", list);
        let songInfo = list[0];
        //开始播放第一首
        this.$store.dispatch("setCurrSongIndex", 0);
        this.$store.dispatch("setIsInCurrList", true); //正在播放的歌曲是在当前播放列表里的
        this.getSongUrl(songInfo.id, songInfo.name, songInfo.al.picUrl, songInfo.ar, 0);
      },
      selectSong(id, name, img, singers, index){
        this.$store.dispatch("setSong", null);  //先清空当前播放的音乐
        this.$store.dispatch("setIsInCurrList", false); //正在播放的歌曲不是在当前播放列表里的
        this.getSongUrl(id, name, img, singers, index);
      },
      getSongUrl(id, name, img, singers, index){
        let url = '';
        this.$axios.get(`/api/song/url?id=${id}`)
          .then(res => {
            url = res.data.data[0].url;
            this.setSong(id, url, name, img, singers, index);
          })
          .catch(err => console.log(err));
      },
      setSong(id, url, name, img, singers, index){
        let song = {};
        song.id = id;
        song.url = url;
        song.imgUrl = img;
        song.name = name;
        song.singers = singers;
        song.index = index;
        this.$store.dispatch("setSong", song);
        this.$store.dispatch("setMiniPlayerVisible", true);
      },
      pageScroll(pos){
        // console.log(pos.y);
        if(pos.y>0 && pos.y< 100){
          // banner放大：
          let s = 1 + pos.y / 100;
          // console.log('放大：'+s+'倍');
          this.scaleValue = `scale(${s}) translateY(0)`;
        }
        if(pos.y<0 && pos.y>-100){
          // banner只文字缩小并向上位移：
          let s = 1 + pos.y / 200;
          let y = -(1 - s) * 100;
          this.scaleValue = `scale(1) translateY(${y}px)`;
          this.opacityValue = s;
        }
      }
    },
    activated(){
      // console.log("子组件activated");
    },
    mounted() {
      // console.log("子组件mounted");
    }
  }
</script>

<style scoped lang="scss">
  .list{
    width: 100%;
    position: relative;
    overflow: hidden;
    .banner{
      width: 100vw;
      height: 100vh;
      background: $white-color;
      .top{
        width: 100vw;
        height: 100vw;
        color: white;
        position: relative;
        overflow: hidden;
        .mask{
          width: 100%;
          height: 100%;
          background: rgba(0, 0, 0, 0.1);
          position: absolute;
        }
        .content{
          width: 100%;
          height: 100%;
          display: flex;
          flex-direction: column;
          justify-content: flex-end;
          align-items: flex-start;
          position: absolute;
          .title{
            width: 90vw;
            margin-left: 5vw;
            margin-bottom: 6px;
            font-size: 0.36rem;
            font-weight: bold;
            white-space: nowrap;
            text-overflow: ellipsis;
            overflow: hidden;
          }
          .listener-number{
            margin-left: 5vw;
            margin-bottom: 32vw;
            font-size: 0.2rem;
            display: flex;
            align-items: center;
            img{
              width: 6vw;
              height: 6vw;
              margin-right: 6px;
            }
          }
        }

      }

    }
    .box{
      width: 100vw;
      height: 100vh;
      overflow: hidden;
      position: absolute;
      top: 0;
      left: 0;
      .scroll-box{
        width: 100%;
        height: 100vh;
        overflow: auto;
        .in-box{
          padding-top: 70vw;
        }
      }
      .container{
        display: flex;
        width: 100vw;
        flex-direction: column;
        border-radius: 4vw 4vw 0 0;
        background-color: $white-color;
        .play-all{
          width: 100vw;
          height: 40px;
          border-bottom: 1px solid #29a19c;
          display: flex;
          align-items: center;
          .play-icon{
            width: 10vw;
            height: 40px;
            display: flex;
            justify-content: center;
            align-items: center;
            img{
              width: 5vw;
              max-width: 20px;
              height: 5vw;
              max-height: 20px;
            }
          }
          .play{
            font-size: 0.32rem;
            color: #222831;
            display: flex;
            align-items: flex-end;
            span{
              font-size: 0.2rem;
              color: #29a19c;
            }
          }
        }
        .songs{
          width: 100vw;
          padding-bottom: 100px;
          .item{
            width: 100%;
            height: 60px;
            display: flex;
            align-items: center;
            border-bottom: 1px solid #29a19c;
            .number{
              width: 10vw;
              height: 60px;
              font-size: 0.3rem;
              display: flex;
              justify-content: center;
              align-items: center;
            }
            .detail{
              max-width: 88vw;
              height: 40px;
              display: flex;
              flex-direction: column;
              justify-content: space-between;
              .songName{
                max-width: 88vw;
                font-size: 0.3rem;
                line-height: 0.4rem;
                color: #222831;
                white-space: nowrap;
                text-overflow: ellipsis;
                overflow: hidden;
              }
              .singer{
                max-width: 88vw;
                font-size: 0.2rem;
                color: #29a19c;
                white-space: nowrap;
                text-overflow: ellipsis;
                overflow: hidden;
              }
            }
          }
        }
      }
    }

  }

</style>